<template>
	<view class="main-content">
		<scroll-view scroll-y :style="{height: scrollHeight}" class="">
			<view class="list-box form-data form-item-vertical">
				<text class="title">基本信息填写</text>
				<view style="margin-top: 20rpx;">
					<uni-forms style="margin-top: 20rpx;" ref="masterEnterForm" :modelValue="FormData" :rules="rules"
						label-width="200rpx">
						<uni-forms-item label="报修设备" name="device" required>
							<input type="text" placeholder="请输入" v-model="FormData.device" style="text-align: right;" />
						</uni-forms-item>
						<uni-forms-item label="选择地址" name="province" required>
							<view class="row-end-1" @click="show = true">
								<view style="text-align: right;">
									<text class="placeholder-class" v-if="region == ''">请选择</text>
									<text v-else style="font-size: 28rpx;">{{region}}</text>
								</view>
								<uni-icons type="right" color="#666" size="36rpx"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="地址" name="address" required>
							<textarea class="adress-input" style="height: 50rpx;" placeholder="请输入"
								v-model="FormData.address" :maxlength="100" :data-maxnum="''">
							</textarea>
						</uni-forms-item>
						<uni-forms-item label="联系方式" name="phoneNumber" required>
							<input type="number" placeholder="请输入" v-model="FormData.phoneNumber"
								style="text-align: right;" />
						</uni-forms-item>
						<uni-forms-item label="预约上门时间" name="subscribeDate" required>
							<view class="row-end" @click="isShowTime=true">
								<view class="selct-placeholder" v-if="FormData.subscribeDate == ''">请选择</view>
								<input type="text" v-else placeholder="请输入" v-model="FormData.subscribeDate"
									style="text-align: right;" />
								<!-- <view >
									{{FormData.subscribeDate}}
								</view> -->
								<u-icon name="arrow-right"></u-icon>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>

			</view>
			<view class="list-box form-data">
				<text class="title">故障描述</text>
				<view class="form-item-vertical">
					<textarea class="JTxtArea lg" placeholder="请简单描述故障，可方便师傅诊断" v-model="FormData.remark"
						:maxlength="100" :data-maxnum="FormData.remark.length+'/100'">
					</textarea>
				</view>
				<view class="form-item-vertical">
					<view class="label">图片上传</view>
					<view class="upload-box">
						<you-upload :maxCount="1" @changeFile="changeFile"></you-upload>
					</view>
				</view>
			</view>
		</scroll-view>
		<you-bottom-btn :btnConfig="bottomBtnConfig" @formSubmit="formSubmit" @testReport="testReport">
		</you-bottom-btn>
		<!-- </u-popup> -->
		<u-picker class="uPickerRepair" :show="show" ref="uPicker" :columns="cityColumns" @confirm="cityConfirm"
			keyName="cname" @change="changeHandler" @cancel="show = false"></u-picker>
		<view class="uDatetimePickerRepair">
			<u-datetime-picker :show="isShowTime" mode="datetime" :minDate="minDate" ref="datetimePicker"
				:visibleItemCount="9" v-model="timeValue" :formatter="formatter" @cancel="isShowTime = false"
				@confirm="selectTimeConfirm" @change="changeTimeEvent"></u-datetime-picker>
		</view>



	</view>
</template>

<script>
	import {
		timestampToDate
	} from '@/utils/index.js'
	import Home from '@/api/home.js'
	// import dataTime from './component/dataTime.vue'

	export default {
		// components: {
		// 	dataTime
		// },
		data() {
			return {
				FormData: {
					device: '',
					address: '',
					phoneNumber: '',
					subscribeDate: '',
					remark: '',
					photo: '',
					province: '',
					provincestring: '',
					city: '',
					citystring: '',
					county: '',
					countystring: '',
				},
				region: '',
				timeValue: "",
				isShowTime: false,
				rules: {
					device: {
						rules: [{
							required: true,
							errorMessage: '请输入报修设备',
						}]
					},
					subscribeDate: {
						rules: [{
							required: true,
							errorMessage: '请选择上门时间',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入地址',
						}]
					},
					phoneNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入电话',
						}]
					},
					province: {
						rules: [{
							required: true,
							errorMessage: '请选择地址',
						}]
					},
				},
				scrollHeight: '',
				bottomBtnConfig: [{
					text: '提交',
					class: 'confirm',
					funcName: 'formSubmit'
				}],
				minDate: new Date().getTime(),
				birthday: "",
				show: false,
				cityColumns: [],
				cityList: [],
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 74 + 'px'
			this.getCityList()
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			formSubmit() {
				this.$refs.masterEnterForm.validate().then(res => {
					this.FormData.subscribeDate = this.FormData.subscribeDate?.replace('时', ':00')
					this.FormData.address = `${this.FormData.provinceString}${this.FormData.cityString}${this.FormData
						.countyString}${this.FormData.address}`
					// console.log('表单数据信息：', res, this.FormData);
					Home.addRepairApply(this.FormData).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "申请成功"
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home'
								})
							}, 1000)
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			changeFile(e) {
				this.$set(this.FormData, "photo", e);
			},
			selectTimeConfirm(e) {
				console.log(this.timeValue)
				console.log(e)
				let time = timestampToDate(e.value, 'ymdhm');
				this.FormData.subscribeDate = time.split(':')[0] + '时';
				this.isShowTime = false;
			},
			changeTimeEvent(e) {
				console.log(e);
				console.log(timestampToDate(e.value, 'ymdhm'))
				setTimeout(() => {
					this.timeValue = e.value;
				}, 500)
			},
			// 打开picker
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},

			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			handleSubmit(e) {
				// console.log(e);
				// {year: "2023", month: "07", day: "11", hour: "15", minute: "21", seconds: '55'}
				this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${seconds}`;
			},
			getCityList() {
				Home.getCity().then(res => {
					this.cityList = res.data
					this.cityColumns[0] = res.data?.filter(item => item.ctype == 1)
					this.cityColumns[1] = res.data?.filter(item => item.parentId == 2)
					this.cityColumns[2] = res.data?.filter(item => item.parentId == 52)
					console.log(this.cityColumns[0], this.cityColumns[1], this.cityColumns[2]);
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let parent = this.cityList.filter(item => item.parentId == value[0].id)
					picker.setColumnValues(1, this.cityList.filter(item => item.parentId == value[0].id))
					picker.setColumnValues(2, this.cityList.filter(item => item.parentId == parent[0].id))
				}
				if (columnIndex === 1) {
					picker.setColumnValues(2, this.cityList.filter(item => item.parentId == value[1].id))
				}
			},
			// 回调参数为包含columnIndex、value、values
			cityConfirm({
				value
			}) {
				let nameList = []
				value.forEach(item => {
					nameList.push(item.cname)
				})
				this.region = nameList.join('/')
				this.FormData.province = value[0].id
				this.FormData.provinceString = value[0].cname
				this.FormData.city = value[1].id
				this.FormData.cityString = value[1].cname
				this.FormData.county = value[2].id
				this.FormData.countyString = value[2].cname
				this.show = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.selct-placeholder {
		color: #999;
		font-size: 28rpx;
	}

	/deep/.adress-input {
		text-align: right;
		width: auto;
		height: 80rpx;

	}

	.main-content {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;

		.list-box {
			padding: 0 20rpx;
			border-radius: 16rpx;
			background: #ffffff;
			margin-bottom: 20rpx;

			.title {
				padding: 20rpx 0;
				display: block;
				border-bottom: 2rpx solid #acacac;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 40rpx;
				opacity: 0.9;
			}
		}
	}

	.form-item-vertical {
		.label {
			color: #1a1a1a;
			font-size: 28rpx;
			padding: 20rpx 0;
			// &::before {
			// 	content: "*";
			// 	color: red;
			// 	font-size: 30rpx;
			// 	display: inline-block;
			// 	margin-right: 10rpx;
			// 	width: 5rpx;
			// 	height: 20rpx;
			// }
		}
	}

	.upload-box {
		height: 200rpx;
		width: 200rpx;
	}

	.upload-after {
		background: #F6F8FA;
		width: 198rpx;
		height: 198rpx;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	/deep/ .uDatetimePickerRepair .u-picker__view {
		.u-picker__view__column:last-child {
			display: none !important;
		}
	}
</style>